<template>
  <Back />
  <div>
    <div class="box-border">
      <van-empty v-if="list.finished && list.data.length < 1" :description="$t('common.noData')" />
      <van-list
        v-if="!list.finished || list.data.length > 0"
        v-model:loading="list.loading"
        :finished="list.finished"
        @load="getList"
        :immediate-check="false"
      >
        <div class="order" v-for="item in list.data" :key="item.orderNumber">
          <div class="m-b-10px">
            <div class="flex font-size-1.4rem">
              <img class="preview" :src="item.productImgs" />
              <div>
                <div v-if="item.expressNumber" class="m-b-4px">{{ item.expressNumber }}</div>
                <div class="m-b-4px">{{ showArriveDay(item) }}</div>
                <div class="m-b-4px">{{ showAgentType(item.status) }}</div>

                <div class="nav-warp">
                  <div class="nav">
                    <div class="item price">
                      <div class="item-text">
                        {{ fee(item) }}
                      </div>
                    </div>
                    <div class="item button" :class="{ disable: fee(item) == 0 }">
                      <div class="item-text" @click="pay(item)">{{ $t('agent.pay') }}</div>
                    </div>
                  </div>
                </div>
                <!--
                <div class="flex items-center">
                  <div>{{ item.status == 0 ? (item.productPrice || 0) + item.serviceFee : item.status == 40 ? item.freight : 0 }}</div>
                  <div class="m-l-10px">
                    <van-button :disabled="item.status != 0 && item.status != 40" type="primary" size="mini" @click="pay(item)">
                      {{ $t('agent.pay') }}
                    </van-button>
                  </div>
                </div> -->
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script setup lang="ts">
const { getList, list, reset } = useList(apis.api.userAgentOrderPage)
const { t } = useI18n()

const assets = ref<ApiAssetVO>()

onMounted(async () => {
  list.loading = true
  getList()
  getAsset()
})

const showArriveDay = (item: ApiAgentOrder) => {
  let str = ''
  if (item.status >= 30) {
    const date = new Date(item.transportTime!)
    date.setDate(date.getDate() + 15)
    str = 'Доставка ' + date.getDate() + ' мая，'
  }

  return str + item.pickUp
}

async function getAsset() {
  assets.value = await apis.api.userAssetAsset()
}

function pay(order: ApiAgentOrder) {
  //  message: shop.value.name + '\n' + shop.value.distance,
  const price = fee(order)
  if (price <= 0) return
  showConfirmDialog({
    title: order.status == 0 ? t('agent.payProduct') : t('agent.payFreight'),
    message: t('common.cash') + ':' + assets.value?.cash + '\n' + t('common.deduction') + ':' + price,
    confirmButtonText: t('common.sure'),
    cancelButtonText: t('common.cancel'),
    beforeClose: (action: string) => {
      return new Promise(resolve => {
        if (action == 'confirm') {
          if (assets.value!.cash! >= price) {
            apis.api
              .userAgentEditOrder({
                orderNumber: order.orderNumber
              })
              .then(() => {
                resolve(true)
                reset()
                getList()
                getAsset()
              })
              .catch(() => resolve(false))
          } else {
            resolve(true)
            nextTick(() => showDialog({ message: t('common.charge') }))
          }
        } else {
          resolve(true)
        }
      })
    }
  })
}

const fee = (order: ApiAgentOrder) => {
  let fee = 0

  if (order.status == 0 || order.status == 40) {
    if (order.status == 0) {
      fee = order.productPrice! + order.serviceFee
      if (order.payType == 1) {
        fee = fee + order.freight!
      }
    } else {
      if (order.payType == 0) {
        fee = order.freight!
      }
    }
  }
  return fee
}
</script>
<style lang="scss" scoped>
.fxc {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.order {
  border-bottom: 1px solid var(--van-button-primary-background);
  margin: 0 4px;
  padding: 8px;
}

.preview {
  width: 80px;
  height: 80px;
  border: 8px;
  margin-right: 8px;
}
.nav-warp {
  width: 240px;
  overflow: hidden;
  border-radius: 4px;
  border-left: 1px solid var(--van-button-primary-background);
}
.nav-warp .nav {
  display: flex;
  gap: 4px;
  width: calc(100% + 40px / 2);
  margin-left: -10px;
}
.nav-warp .item {
  box-sizing: border-box;
  width: 110px;
  flex: auto;
  transform: skew(-30deg);
  border-radius: 4px;
}
.nav-warp .item .item-text {
  height: 20px;
  line-height: 20px;
  transform: skew(30deg);
  text-align: center;
}
.nav-warp .price {
  border: 1px solid var(--van-button-primary-background);
  .item-text {
    color: var(--van-button-primary-background);
  }
}
.nav-warp .button {
  color: #fff;
  background-color: var(--van-button-primary-background);
  &:active {
    background-color: var(--van-button-primary-background);
  }
}
.disable {
  opacity: var(--van-button-disabled-opacity);
}
</style>
